<template>
	<view class="personal-info-wrap">
		<view class="form">
			<view class="form-item flex-x-start">
				<text class="label">昵称</text>
				<input class="form-inp" type="text" v-model="personal.name" placeholder="请输入昵称"></input>
			</view>
			<view class="form-item flex-x-start">
				<text class="label">性别</text>
				<view class="sex-wrap form-inp">
					<view :class="[`inline-block man item ${personal.gender==1 ? 'checked' : ''}`]" @click="personal.gender=1">
						<view class="icon-wrap inline-block text-center">
							<text class="iconfontPT iconnansheng_1"></text>
						</view>
						男
					</view>
					<view :class="[`inline-block woman item ${personal.gender==2 ? 'checked' : ''}`]" @click="personal.gender=2">
						<view class="icon-wrap inline-block text-center">
							<text class="iconfontPT iconnvsheng"></text>
						</view>
						女
					</view>
				</view>
			</view>
			<view class="form-item flex-x-start">
				<text class="label">来自</text>
				<navigator url="/pages/recruit/city-model/index" class="clear form-inp" hover-class="none">
					<text v-if="detail.city" class="pull-left">{{detail.city}}</text>
					<text v-else class="placeholder pull-left">请选择您的地址</text>
					<text class="iconfontPT iconxiayibu pull-right"></text>
				</navigator>
			</view>
			<view class="form-item flex-x-start" style="align-items: flex-start;">
				<text class="label">个人描述</text>
				<textarea class="textarea form-inp form-item__textarea" placeholder="请填写个人描述" :auto-focus="true" maxlength="60" v-model="personal.autograph"></textarea>
			</view>
		</view>
		<view class="confirm-btn-wrap w100">
			<button class="confirm-btn" hover-class="hoverClass" @click="handleConfirm">
				保存
			</button>
		</view>
	</view>
</template>

<script>
	import {
		getUserDtlInfo
	} from '../../../apis/recruit/index.js'

	export default {
		data() {
			return {
				detail: {
					city: ''
				},
				personal: {
					gender: 1,
					name: '',
					autograph: ''
				}
			}
		},
		onLoad() {
			this.getPersonalInfo()
		},
		methods: {
			getPersonalInfo() {
				this.$loading.show()
				getUserDtlInfo().then(res => {
					this.$loading.hide()
					this.personal.name = res.data.name
					this.detail.city = res.data.city
					this.personal.gender = res.data.sex
					this.personal.autograph = res.data.autograph
				})
			},
			handleConfirm() {
				let params = {
					name: this.personal.name,
					sex: this.personal.gender,
					city: this.detail.city,
					autograph: this.personal.autograph,
				}
				this.$loading.show()
				getUserDtlInfo(params).then(res => {
					this.$loading.hide()
					uni.showToast({
						title: '操作成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 500)
				})
			}
		}
	}
</script>

<style lang="less">
	.personal-info-wrap {
		.form {
			padding: 0 30rpx;
			.form-item {
				padding: 26rpx 0;
				border-bottom: 1rpx solid rgba(199, 190, 190, .5);

				.label {
					width: 250rpx;
				}

				.form-inp {
					width: 440rpx;
				}
					
				&__textarea{
					height: 5em;
				}
				.sex-wrap {
					.item {
						&:nth-child(odd) {
							margin-right: 80rpx;
						}

						&.man {
							&.checked {
								color: #2A92E6;

								.icon-wrap {
									background: #2A92E6;
								}
							}
						}

						&.woman {
							&.checked {
								color: #FF5C91;

								.icon-wrap {
									background: #FF5C91;
								}
							}
						}

						.icon-wrap {
							width: 48rpx;
							height: 48rpx;
							line-height: 39rpx;
							background: #C4C4C4;
							border-radius: 100%;
							margin-right: 10rpx;

							.iconfontPT {
								font-size: 22rpx;
								color: #ffffff;
							}
						}
					}
				}
			}
		}

		.confirm-btn-wrap {
			position: fixed;
			bottom: 0;
			left: 0;
			box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
			height: 166rpx;

			.confirm-btn {
				width: 690rpx;
				margin-top: 15rpx;
				background: #E41805FF;
				color: #ffffff;
				font-size: 30rpx;
			}
		}
	}
</style>
